import { ChevronDownIcon } from '@chakra-ui/icons';
import {
  Avatar,
  Box,
  Button,
  Flex,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Stack,
  useColorModeValue,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { MdLogout } from 'react-icons/md';
import { Link as ReactRouterLink, useNavigate } from 'react-router-dom';

import MyDivider from '@/common/components/Divider';

interface AigcHeaderUserProps {
  user: any;
  logoutFn: () => void;
}
export default function AigcHeaderUser({
  user: userInfo,
  logoutFn: handleLogout,
}: AigcHeaderUserProps) {
  const navigate = useNavigate();
  const btn_bg = useColorModeValue('base.900', 'base.800');
  const btn_hover_bg = useColorModeValue('base.850', 'base.750');
  const popoverContent_bg = useColorModeValue('base.950', 'base.850');
  const btn_color = useColorModeValue('#333333', 'base.200');
  const sx = {
    bg: btn_bg,
    color: 'base.300',
    _hover: { bg: btn_hover_bg },
    variant: 'ghost',
    rounded: 'base',
  };

  const { t } = useTranslation();

  return (
    <Popover trigger="hover" placement="bottom-start">
      <PopoverTrigger>
        <Box>
          <Button
            variant="ghost"
            color="#666666"
            _dark={{
              color: 'base.200',
              _hover: {
                color: 'base.200',
              },
            }}
            _hover={{
              bg: useColorModeValue('base.950', 'base.850'),
              color: btn_color,
            }}
            px={2}
            rounded="base"
            onClick={() => navigate('/gallery')}
            display={{ base: 'none', md: 'flex' }}
            rightIcon={<ChevronDownIcon />}
          >
            {userInfo.username}
          </Button>

          <Flex w="40px" justify="center">
            <Avatar
              shadow="md"
              display={{ base: 'flex', md: 'none' }}
              name={userInfo.username}
              size="sm"
              cursor="pointer"
              onClick={() => navigate('/gallery')}
            />
          </Flex>
        </Box>
      </PopoverTrigger>
      <PopoverContent
        bg={popoverContent_bg}
        p={4}
        borderRadius="base"
        w="150px"
      >
        <Stack>
          <Button sx={sx} as={ReactRouterLink} to="/gallery">
            个人中心
          </Button>
          {/* <Button as={ReactRouterLink} to="/training" sx={sx}>
            {t('common.train')}
          </Button> */}
          <MyDivider />
          <Button sx={sx} onClick={handleLogout} rightIcon={<MdLogout />}>
            {t('profile.logout')}
          </Button>
        </Stack>
      </PopoverContent>
    </Popover>
  );
}
